import React from "react";
import { Line } from "@ant-design/charts";
import { Row, Col, Card } from "antd";

const Stats: React.FC = () => {
    const data = [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: 6 },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 },
    ];

    const config = {
        data,
        height: 250,  // 降低高度使图表更扁平
        padding: 'auto',
        xField: "year",
        yField: "value",
        smooth: true,
        lineStyle: {
            stroke: '#1890ff', // 蓝色线条
            lineWidth: 2,
        },
        point: {
            size: 2,  // 缩小数据点
            shape: "circle",
            style: {
                fill: '#1890ff',
                stroke: '#1890ff',
            },
        },
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: false,
            },
        },
        yAxis: {
            grid: {
                line: {
                    style: {
                        stroke: '#f0f0f0',
                        lineWidth: 1,
                    },
                },
            },
        },
        animation: false, // 禁用动画使渲染更紧凑
    };

    return (
        <div style={{ padding: 12 }}>
            <Row gutter={[16, 16]}>
                <Col xs={24} sm={12} md={12} lg={12} xl={12}>
                    <Card 
                        title="CPU负载" 
                        bordered={false}
                        bodyStyle={{ padding: 12 }}
                    >
                        <Line {...config} />
                    </Card>
                </Col>
                <Col xs={24} sm={12} md={12} lg={12} xl={12}>
                    <Card 
                        title="内存使用量" 
                        bordered={false}
                        bodyStyle={{ padding: 12 }}
                    >
                        <Line {...config} />
                    </Card>
                </Col>
                <Col xs={24} sm={12} md={12} lg={12} xl={12}>
                    <Card 
                        title="网络流量" 
                        bordered={false}
                        bodyStyle={{ padding: 12 }}
                    >
                        <Line {...config} />
                    </Card>
                </Col>
                <Col xs={24} sm={12} md={12} lg={12} xl={12}>
                    <Card 
                        title="磁盘读写" 
                        bordered={false}
                        bodyStyle={{ padding: 12 }}
                    >
                        <Line {...config} />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default Stats;